<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="pinpin社保" />
		<meta name="description" content="pinpin社保" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>社保运营后台-订单管理</title>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
</head>
<body>
	<div id="wrapper">
	<%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
		<div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>社保后台</li>
				      <li class="active">类型消息</li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
            			    <!-- tab menu -->
            			    <ul class="nav nav-pills">
                                <li <c:if test="${typePage}">class="active"</c:if>><a href="#news2" data-toggle="tab" aria-expanded="${typePage }" onclick="javascript:tolist(0);">类型消息</a></li>
                                <li <c:if test="${listPage}">class="active"</c:if>><a href="#news1" data-toggle="tab" aria-expanded="${listPage}" onclick="javascript:tolist(1);">区域消息</a></li>
                            </ul>
                            <!-- /tab menu -->
                            <!-- tab content -->
                            <div class="tab-content">
	                         <!-- news2 -->
	                            <div class="tab-pane fade <c:if test='${typePage}'>active in</c:if>" id="news2" >
	                               	<div class="col-lg-12">
	                               		<div class="col-lg-3"></div>
                               		<label class="col-lg-3 control-label"><a href="javascript:helpToggle();"> 说 明 </a></label>
                               		<label class="col-lg-6 control-label"><a href="javascript:mtToggle();">配置消息-显示隐藏</a></label>
	                               	</div>
	                               	<div class="col-lg-12" id="helpDiv" style="display:none">
	                               		<label style="font-weight:normal">
	                               		1. 消息的服务时间是每天10点整始~22点整止。</label><br>
	                               		<label style="font-weight:normal">
	                               		2. 指定手机用户 类型消息，手机号可以是登录帐号，也可以是参保人联系手机号。</label><br>
	                               		<label style="font-weight:normal">
	                               		3. 本功能配置的消息，由系统定时服务每隔5分钟处理。也就是说2分钟内会发送出去。</label><br>
	                               		<label style="font-weight:normal">
	                               		4. 可单击标题栏的链接，进入详细页查看每个用户的消息发送情况。</label><br>
	                               		<label style="font-weight:normal">
	                               		5. 此页面配置的消息，会显示在 我的社保APP-我的-我的消息 上。</label><br>
	                               	</div>
	                            	<form class="form-horizontal" action=""  id="mt_form" method="post" style="display:none">
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">消息渠道：</label>
		                                    <div class="col-lg-10">
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="channel" value="p">推送</label>
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="channel" value="s">短信</label>
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="channel" value="ps" checked>推送+短信</label>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">接收用户：</label>
		                                    <div class="col-lg-10">
		                                    	<!--
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="receive" value="all" onclick="javascript:channelChange(this);">全部用户</label>-->
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="receive" value="time" checked  onclick="javascript:channelChange(this);">时间内用户</label>
			                                        <!-- 
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="receive" value="all_order" onclick="javascript:channelChange(this);">全部订单用户</label> -->
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="receive" value="month_order" onclick="javascript:channelChange(this);">月份订单用户</label>
			                                    <label class="checkbox-inline">
			                                        <input type="radio" name="receive" value="phone" checked onclick="javascript:channelChange(this);">指定手机用户</label>
		                                    </div>
		                                </div>
		                                <div class="form-group" id="month_div" style="display:none">
		                                    <label class="col-lg-2 control-label">指定月份：</label>
		                                    <div class="col-lg-4">
		                                      <input type="text" class="form-control" name="start_month" placeholder="请选择年月" onClick="WdatePicker({dateFmt:'yyyyMM',minDate:'2015-10-01 00:00:00'})" value="" onblur="return checkDate()">
		                                    </div>
		                                    <div class="col-lg-4">
		                                      <input type="text" class="form-control" name="end_month" placeholder="请选择年月" onClick="WdatePicker({dateFmt:'yyyyMM',minDate:'2015-10-01 00:00:00'})" value="" onblur="return checkDate()">
		                                    </div>
		                                </div>
		                                <div class="form-group" id="time_div" style="display:none">
			                                <label  class="col-lg-2 control-label">登录时间：</label>
		                                    <div class="col-lg-3">
		       			    				<input type="text" class="form-control" name="start_time" placeholder="开始时间" onClick="WdatePicker()" >
		       			    				</div>
		                                    <div class="col-lg-1">
		                                       <span>-&#12288;</span>
		       			    				</div>
		                                    <div class="col-lg-3">
		       			    				<input type="text" class="form-control" name="end_time" placeholder="结束时间" onClick="WdatePicker()">
		       			    				</div>
		                                </div>
		                                <div class="form-group" id="phone_div">
		                                    <label class="col-lg-2 control-label">指定手机：</label>
		                                    <div class="col-lg-10">
		                                    	<textarea name="phones" rows="5" class="form-control" placeholder="多个用户手机以逗号间隔,可采用CSV格式文件辅助"></textarea>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">标题：</label>
		                                    <div class="col-lg-10">
		                                    	<textarea name="title" class="form-control" placeholder="填写标题，留意标题长度。" id="title1"></textarea>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">内容：</label>
		                                    <div class="col-lg-10">
		                                    	<textarea name="content" rows="5" class="form-control" onkeyup="javascript:calLen(this);" placeholder="填写消息内容，留意消息长度。"></textarea>
		                                    	一条短信70个文字。当前字数：<label id="conent_len">0</label>
		                                    </div>
		                                    <input type="hidden" class="form-control" name="smsNow" id="smsNow" placeholder="即时发送"  value="0">
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label"></label>
		                                    <div class="col-lg-3">
			                                	<input type="button" value="计算人数" onclick="javascript:calUsers()" class="btn btn-primary btn-sm"/>
			                                </div>
			                                <div class="col-lg-3">
			                                	<input type="button" id="btn_now" value="即时发送" onclick="javascript:sendMsg(1)" class="btn btn-info"/>（立即将消息以短信发出）
			                                </div>
		                                    <div class="col-lg-4">
			                                	<input id="tm_btn" type="button" value="配 置 完 成 " onclick="javascript:sendMsg(0)" class="btn btn-primary btn-sm"/>（2分钟内系统会处理）
			                                </div>
			                            </div>
		                            </form>
		                            <!-- table -->
        			    			<div class="col-lg-12">
        			    				<c:forEach items="${tmList }" var="tm">
        			    				<table class="table table-striped table-bordered table-hover no-footer dataTable" role="grid">
        			    					<tbody>
	        			    					<tr role="row">
	                                                    <td width="100px">${tm.id }</td>
	                                                    <td>
	                                                    <c:if test="${tm.channel=='p' }">推送</c:if>
	                                                    <c:if test="${tm.channel=='s' }">短信</c:if>
	                                                    <c:if test="${tm.channel=='ps' }">推送+短信</c:if>
	                                                    </td>
	                                                    <td>
	                                                    <c:if test="${tm.receive=='all' }">所有用户</c:if>
	                                                    <c:if test="${tm.receive=='time' }">时间区间用户</c:if>
	                                                    <c:if test="${tm.receive=='month_order' }">月份订单用户</c:if>
	                                                    <c:if test="${tm.receive=='phone' }">指定手机用户</c:if>
	                                                    </td>
	                                                    <td>${tm.sizes}</td>
	                                                    <td>${tm.opt_user}</td>
	                                                    <td>${tm.gen_sec}</td>
	                                                    <td>
	                                                    	<!-- 
	                                                    	<a href="/sba/news/del_tm?id=${tm.id }">删除</a>
	                                                    	 -->
	                                                    </td>
	                                                <tr>
	                                                	<td style="color:#CC9">接收人范围</td>
	                                                    <td style="text-align:left;" colspan="6">
	                                                    	${tm.conditions } &nbsp;&nbsp;&nbsp;
	                                                    	<a href="${detail_uri}?tmId=${tm.id }">【 查看发送情况 】</a>
	                                                    </td>
	        			    						</tr>
	                                                <tr style="background-color:#FFF">
	                                                	<td style="color:#CC9">标题</td>
	                                                    <td style="text-align:left;" colspan="6">${tm.title }</td>
	                                                </tr>
	                                                <tr>
	                                                	<td style="color:#CC9">内容</td>
	                                                    <td style="text-align:left;" colspan="6">${tm.content }</td>
	                                                </tr>
        			    					</tbody>
        			    				</table>
        			    				</c:forEach>
        			    			</div>
	                            </div>
	                         	<!--/news2-->
                                 <!-- news1 -->
                                 <div class="tab-pane fade <c:if test='${listPage}'>active in</c:if>" id="news1"> 
		            			    <form class="form-horizontal" action="${area_msg_new_uri }" method="post">
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">请输入消息标题：</label>
		                                    <div class="col-lg-10">
		                                      <input type="text" class="form-control" name="title" id="title">
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">请输入消息内容：</label>
		                                    <div class="col-lg-10">
		                                        <textarea class="form-control" name="content" rows="3"></textarea>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label">请选择群发城市：</label>
		                                    <div class="col-lg-10">
		                                    <c:forEach items="${cityList }" var="city">
		                                    <label class="checkbox-inline" style="width:100px">
		                                            <input type="checkbox" name="citys" value="${city.id }">${city.name }
		                                        </label>
		                                    </c:forEach>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label class="col-lg-2 control-label"></label>
		                                    <div class="col-lg-10">
		                                    <button type="submit" class="btn btn-primary">确认群发</button>
		                                    </div>
		                                </div>
		                            </form>
                            <!-- 分页 -->
                            <c:set var="page_link" value="${area_msg_list_uri }?"></c:set>
                            <c:set var="pre_disabled" value=""></c:set>
		    				<c:if test="${pageModel.pageNo le 1}">
		    					<c:set var="pre_disabled" value="disabled"></c:set>
		    				</c:if>
		    				<c:set var="next_disabled" value=""></c:set>
		    				<c:if test="${pageModel.pageNo ge pageModel.pageTotal}">
		    					<c:set var="next_disabled" value="disabled"></c:set>
		    				</c:if>
                                <br/>
        			    		<div class="row">
        			    			<div class="col-lg-12">
        			    			<form action="${area_msg_list_uri }" method="get">
        			    				<div class="ss-pagination">
                                            <span class="ui-text-box">共${pageModel.totalRecord }条 ${pageModel.pageTotal }页</span>
                                            <span class="ui-text-box">每页${pageModel.pageSize }条</span>
                                            <span class="ui-text-box">当前第${pageModel.pageNo }页</span>
        			    					<ul class="pagination">
        			    						<li class="previous ${pre_disabled }" tabindex="0"><a href="${page_link }pageNo=${pageModel.previousPageNo }">上一页</a></li>
        			    						<%@ include file="../page_queue.jsp" %>
        			    						<li class="next ${next_disabled }" tabindex="0"><a href="${page_link }pageNo=${pageModel.nextPageNo }">下一页</a></li>
        			    					</ul>
        			    					<span>向第</span>
                                                    <input type="text" name="pageNo" size="3">
                                                    <span>页</span>
        			    					<button type="submit" class="btn btn-primary">跳转</button>
        			    				</div>
        			    				</form>
        			    			</div>
        			    		</div>
        			    	<hr />
                            <!-- 表格列表 -->
                            <div class="row">                 
                                <div class="col-lg-12">
                                <!-- <label><input id="batchDel" class="btn btn-primary" type="button" value="批量删除" onclick="javascript:batchDel()"></label>-->
                                    <table class="table table-striped table-bordered table-hover no-footer" role="grid">
                                        <thead>
                                            <tr>
                                            <!-- 
                                            <th width="65"><label>
                                            	<input id="selectAll" type="checkbox" onclick="javascript:selectAll(this,'nids')">全选</label>
                                            </th> -->
                                                <th style="text-align:left">标题</th>
                                                <th>内容</th>
                                                <th width="">城市</th>
                                                <th width="60px">已推送</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${pageModel.recordList }" var="news">
                                        <tr role="row">
                                        	<!-- 
                                                <td><input type="checkbox" name="nids" value="${news.id }"></td>
                                                 -->
                                                <td style="text-align:left; width:25%">
                                                	${news.send_time } <br><br>
                                                	${news.title }</td>
                                                <td style="width:30%">${news.content }</td>
                                                <td style="text-align:left;" >${news.citys }</td>
                                                <td style="text-align:left;" >${news.sended }</td>
                                               <!-- 
                                                <td><fmt:formatDate value="${news.publish_time }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                <td><a href="/sba/news/del?id=${news.id }">删除</a></td>
                                                 -->
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
            			<hr />
            			<!-- 分页 -->
                                <br/>
        			    		<div class="row">
        			    			<div class="col-lg-12">
        			    			<form action="${area_msg_list_uri }" method="get">
        			    				<div class="ss-pagination">
                                            <span class="ui-text-box">共${pageModel.totalRecord }条 ${pageModel.pageTotal }页</span>
                                            <span class="ui-text-box">每页${pageModel.pageSize }条</span>
                                            <span class="ui-text-box">当前第${pageModel.pageNo }页</span>
        			    					<ul class="pagination">
        			    						<li class="previous ${pre_disabled }" tabindex="0"><a href="${page_link }pageNo=${pageModel.previousPageNo }">上一页</a></li>
        			    						<%@ include file="../page_queue.jsp" %>
        			    						<li class="next ${next_disabled }" tabindex="0"><a href="${page_link }pageNo=${pageModel.nextPageNo }">下一页</a></li>
        			    					</ul>
        			    					<span>向第</span>
                                                    <input type="text" name="pageNo" size="3">
                                                    <span>页</span>
        			    					<button type="submit" class="btn btn-primary">跳转</button>
        			    				</div>
        			    				</form>
        			    			</div>
        			    		</div>
        			    	 </div>
        			    	 <!--/news1 -->
                           </div>
                           <!--/tab content -->
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
    <script type="text/javascript">
    	function tolist(type) {
    		if (type == 1) {
    			document.location.href="${area_msg_list_uri}";
    		} else {
    			document.location.href="${list_uri}";
    		}
    	}
    
    	function channelChange(obj) {
    		var type = $(obj).val();
    		if (type == "all" || type=="all_order") {
    			$("#phone_div").hide(); 
    			$("#month_div").hide();  
    			$("#time_div").hide(); 
    		} else if (type=="month_order") {
    			$("#phone_div").hide();
    			$("#month_div").show();    
    			$("#time_div").hide();   			
    		} else if (type=="time") {
    			$("#month_div").hide();  
    			$("#time_div").show();   
    			$("#phone_div").hide();			
    		} else {
    			$("#month_div").hide();     
    			$("#time_div").hide(); 
    			$("#phone_div").show();    			
    		}
    	}
    	
    	function calUsers() {
    	   	var data = $("#mt_form").serialize();
    		jQuery.ajax({
    			url: "${new_cal_uri}",
    			data: data,
    			type:'post', 
    			async : true, //默认为true 异步   
    			success:function(result){
   	    		   	if (result.code == 200) {
   	    		   		smokeAlert(result.code, result.data);
   	    		   	} else {
   	    			   	smokeAlert(result.code, result.msg);
   	    		   	}
    			}
    		});
    	}

    	// 更新社保卡操作状态
    	function sendMsg(smsNow){
    		$("#smsNow").val(smsNow);
    	   	var data = $("#mt_form").serialize();
    	   	$("#tm_btn").attr('disabled', 'true');
    	   	$("#tm_btn").val("处理中，稍等……");
    	   	$("#btn_now").attr('disabled', 'true');
    	   	$("#btn_now").val("处理中，稍等……");
    		jQuery.ajax({
    			url: "${new_uri}",
    			data: data,
    			type:'post', 
    			async : true, //默认为true 异步   
    			success:function(result){
   	    		   	if (result.code == 200) {
   	    		   		iRun(smsNow==1?"消息已发送到短信平台":"消息配置成功, 稍候自动发出", 2, function(){
                            window.location.reload();
   	    		   		});
   	    		   	} else {
   	    	    	   	$("#tm_btn").val("配 置 完 成");
   	    	    	   	$("#tm_btn").removeAttr('disabled'); 
   	    	    	   	$("#btn_now").val("即时发送");
   	    	    	   	$("#btn_now").removeAttr('disabled'); 
   	    			   	smokeAlert(result.code, result.msg);
   	    		   	}
    			}
    		});
    	}
    	
    	function calLen(obj) {
    		var data = $(obj).val();
    		$("#conent_len").text(data.length);
    	}
    	/*
    	function dataLength(fData) { 
    	    var intLength=0 
    	    for (var i=0;i<fData.length;i++) 
    	    { 
    	        if ((fData.charCodeAt(i) < 0) || (fData.charCodeAt(i) > 255)) 
    	            intLength=intLength+2 
    	        else 
    	            intLength=intLength+1    
    	    } 
    	    return intLength 
    	} */

    	function helpToggle() {
    		$('#helpDiv').toggle();
        }

        function mtToggle() {
        	$('#mt_form').toggle();
        }
    </script>
</body>
</html>